import styled from 'styled-components'
// import mouseOne from '../../static/mouse/mouse1.cur'
// import mouseTwo from '../../static/mouse/mouse1.cur'

import {
  boxWidthBig,
  boxWidthMiddle,
  boxWidthSmall,
  headerLogo,
  navFontColor,
  navIcoRotate,
  playImg,
  smallImg,
  btnColor,
} from '../../config/style'

export const HeaderWrapper = styled.div`
  position: relative;
  max-width: ${boxWidthBig};
  min-height: 60px;
  margin: 0 auto;
  padding: 0 15px;
  z-index: 1;
  display:flex;
  justify-content: flex-start;
  @media (min-width: 878px) {
    max-width: ${boxWidthSmall};
  }
  @media (min-width: 1102px) {
    max-width: ${boxWidthMiddle};
  }
  @media (min-width: 1310px) {
    max-width: ${boxWidthBig};
  }
`
export const HeaderLogo = styled.div`
  width: 220px;
  background: url(${headerLogo}) no-repeat center;
`
export const HeaderNavWrapper = styled.ul`
  height:100%;
  min-height: ${(props)=> props.size === 'big'?'60px':''};
  position: relative;
  display: flex;
  flex-direction:${(props)=> props.size === 'big'?'row':'column'};
  max-height: ${(props)=> props.size === 'big'?'auto':'0px'};
  overflow-y: ${(props)=> props.size === 'big'?'':'auto'};
  flex-wrap: ${(props)=> props.size === 'big'?'':'nowrap'};
  transition: all .3s;
  .child_item{
    flex-direction: column;
    a{
      box-sizing: border-box;
      padding: 12px 15px!important;
    }
  }
  .child_item:hover{
    .child_tab {
      display: block;
    }
  }
  .active{
    background:rgba(138,43,226,0.7)!important;
  }
  @media (min-width: 1310px) {
    max-width: ${boxWidthBig};
  }
  @media (max-width: 878px) {
    display: ${(props)=> props.size === 'big'?'none':'flex'};
  }
  @media (min-width: 878px) {
    display: ${(props)=> props.size === 'big'?'flex':'none'};
  }
`
export const HeaderNavItem = styled.li`
  display: flex;
  position: relative;
  align-items: center;
  font-size: 16px;
  color: white;
  a{
    padding: 20px 15px;
    color: rgb(255,255,255);
    width: 100%;
    text-decoration: none;
    transition: background .3s ease-out;
    .icon-run {
      display: inline-block;
      animation: ${navIcoRotate} 2s linear infinite;
    }
  }
  .child_tab {
    width: 100%;
    display: none;
    position: relative;
    margin: 5px 0;
    min-width: 150px;
    border-radius: 0;
    box-shadow: 0 0 0px rgb(100,100,100);
    top: 0;
    left: 0;
    background: transparent;
    li {
      justify-content: flex-start;
      white-space: nowrap;
      color: ${navFontColor};
    }
    li:hover {
      color: white;
      background: ${btnColor};
    }
  }
  &:hover a{
    background:rgba(100,90,226,0.7);
  }
  &:hover .child_tabb{
    display: block;
  }
`
export const NavItemTabWrapper = styled.ul`
  min-width: 150px;
  border-radius: 3px;
  box-shadow: 0 0 3px rgb(100,100,100);
  position: absolute;
  display: none;
  top: 60px;
  left: 0;
  background: rgba(255,255,255,.7);
  padding: 5px 0;
`
export const NavItemTabItem = styled.li`
  display: flex;
  // justify-content: center;
  padding: 10px 20px;
  color: ${navFontColor};
  white-space: nowrap;
  &:hover{
    color: #ffffff;
    background: ${btnColor};
  }
`
export const NavBtn = styled.button`
  position: absolute;
  right: 15px;
  top: calc(30px - 19px);
  bottom: 8px;
  display: none;
  border: 1px solid rgb(100,100,100);
  background: ${(props) =>props.tf==='click'?'rgb(51, 51, 51)':'transparent'};
  padding: 0 8px;
  height: 38px;
  outline: none;
  font-size: 20rem;
  font-weight: 600;
  color: #ffffff;
  border-radius: 4px;
  &:hover{
    cursor: pointer;
  }
  @media (max-width: 878px) {
    display: block;
    body{
      background-size: auto!important;
      background-repeat: repeat!important; 
    }
  }
`
export const BackgroundWrapper = styled.div`
  position: fixed;
  z-index: 0;
  right: 0;
  left: 0; 
  top: 0;
  bottom: 0;
  .back-img-run{
    display: block;
    z-index: 1;
    animation: ${playImg} 11s linear infinite;
  }
  .back-img-next-run{
    display: block;
    z-index: 0;
  }
`
export const BackItem = styled.div`
  position: absolute;
  display: none;
  z-index: -1;
  right: 0;
  left: 0; 
  top: 0;
  bottom: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(${(props) => props.img})
`
export const SmallImg = styled.div`
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background-image: url(${smallImg})
`